<template>
	<view>
		<view class="buyWrap">
			<view class="buyItem" v-for="item in buyList" :key="item.goods_id">
				<view class="pic">
					<image :src="item.goods_pic[0].pics_url" mode="widthFix"></image>
				</view>
				<view class="info">
					<view class="goodsName">{{item.goods_name}}</view>
					<view class="goodsPrice">￥{{item.goods_price}}</view>
					<view class="goodsNum">数量：×{{item.goods_num}}</view>
				</view>
			</view>
			<view class="control">
				<view class="total">总价：<text>{{total}}</text></view>
				<view class="buyBtn" @click="quickBuy">立即支付</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				buyList:[],
				total:0,
				personList:[],
				loginInfo:""
			}
		},
		methods: {
			getTotal(){
				let total = 0
				this.buyList.forEach(v=>{
					total+=v.goods_price*v.goods_num
				})
				this.total = total
			},
			quickBuy(){
				let personNo = new Date()
				personNo  = personNo.getTime()
				let personTime = new Date()
				personTime = personTime.toDateString()
				let total = this.total
					let obj  = {"personNo":personNo,"total":total,"loginInfo":this.loginInfo,"personTime":personTime,"goodsInfo":this.buyList}
					this.personList.push(obj)
					uni.setStorageSync("personList",this.personList)
					uni.showLoading({
						title:"支付中..."
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:"../paySuccess/paySuccess"
						})
					},1500)
			}
		},
		onShow() {
			if(uni.getStorageSync("buyList")){
				this.buyList = uni.getStorageSync("buyList")
			}
			this.getTotal()
			this.loginInfo = uni.getStorageSync("loginInfo")
			if(uni.getStorageSync("personList")){
				this.personList = uni.getStorageSync("personList")
			}
			
		}
	}
</script>

<style lang="less">
	.buyWrap{
		.buyItem{
			display: flex;
			padding: 20rpx 30rpx;
			border-bottom: 1rpx solid #efefef;
			.pic{
				flex: 3;
				image{
					width: 100%;
				}
			}
			.info{
				flex: 5;
				display: flex;
				flex-direction: column;
				padding: 30rpx 10rpx;
				line-height: 60rpx;
				margin-top: 20rpx;
				.goodsName{
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}
		.control{
			width: 100%;
			height: 100rpx;
			background-color: white;
			border-top: 1rpx solid gray;
			display: flex;
			.total{
				flex: 2;
				display: flex;
				align-items: center;
				padding-left: 30rpx;
				font-size: 48rpx;
				text{
					color: red;
				}
			}
			.buyBtn{
				flex: 1;
				background-color: red;
				width: 100%;
				height: 100%;
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

	}
</style>
